<template>
  <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
    <el-form-item label="用户账号">
      <el-input v-model="queryInfo.userName" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="用户名称">
      <el-input v-model="queryInfo.name" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="性别" style="width: 170px;">
      <el-select v-model="queryInfo.sex" placeholder="请输入性别" clearable>
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="queryInfo.phone" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="getUserList">搜索</el-button>
    </el-form-item>
  </el-form>
  <div>
    <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
    <el-button type="danger" icon="Delete" plain>删除</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="userName" label="用户账号" />
    <el-table-column prop="nickName" label="用户昵称" />
    <el-table-column prop="name" label="用户名称" />
    <el-table-column prop="sex" label="性别" width="80" />
    <el-table-column prop="phone" label="手机号" />
    <el-table-column prop="imageUrl" label="头像">
      <template #default="scope">
        <img :src="url + scope.row.imageUrl" alt="" style="width: 50px;height: 50px;">
      </template>
    </el-table-column>
    <<el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
          修改
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
          删除
        </el-button>
      </template>
      </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
      v-model:current-page="queryInfo.pageNum"
      v-model:page-size="queryInfo.pageSize"
      :page-sizes="[1, 5, 10, 20]"
      :size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  <!-- 添加修改 对话框 -->
  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
    <el-form :model="User">
      <el-form-item label="用户账号" :label-width="formLabelWidth">
        <el-input v-model="User.userName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户昵称" :label-width="formLabelWidth">
        <el-input v-model="User.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input v-model="User.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="User.sex" placeholder="请选择性别" clearable>
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input v-model="User.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="头像" :label-width="formLabelWidth">
        <el-upload class="avatar-uploader" 
        list-type="picture-card" 
        action="http://localhost:8080/file/upload"
        :on-success="handleAvatarSuccess">
          <el-icon  class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

  <script setup>
  import axios from 'axios'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { reactive, ref, onMounted } from 'vue'
  const url = 'http://localhost:8080/file/download?fileName='
  const saveOrUpdateVisible = ref(false)
  const saveOrUpdateTitle = ref('')
  const tableData = ref([])
  const total = ref(0)
  const imageUrl = ref('')
  const fileList = ref([]);
  const User = ref([{
    id: '',
    userName: '',
    nickName: '',
    name: '',
    sex: '',
    phone: '',
    imageUrl: ''
  }])

  // 图片上传保存
const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
  // 假设后端返回的响应中包含上传成功的文件路径
  User.value.imageUrl = response.data;

}
  // 分页
// 当用户改变每页显示的条目数时触发
const handleSizeChange = (pageSize) => {
  queryInfo.value.pageSize = pageSize;
  getUserList();
}
// 当用户改变当前页码时触发
const handleCurrentChange = (pageNum) => {
  queryInfo.value.pageNum = pageNum;
  getUserList();
}
// 保存或更新
const saveOrUpdate = () => {
  if (saveOrUpdateTitle.value == '添加用户表') {
    // 调用后端接口添加
    axios.post('/user/findAdd',User.value)
      .then(resp => {
        let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
        if (result.code == 1) {
          // 重新获取列表
          getUserList();
          ElMessage.success('添加文章成功')
        } else {
          // console.log('添加文章失败')
          ElMessage.warning('添加文章失败')
        }
      })
  } else {
    // 调用后端接口修改
    axios.put('/user/update', User.value)
      .then(resp => {
        let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
        if (result.code == 1) {
          // 重新获取列表
          getUserList();
          ElMessage.success('修改文章成功')
        } else {
          // console.log('修改文章失败') 
          ElMessage.warning('修改文章失败')
        }
      })
  }
  // 关闭弹框
  saveOrUpdateVisible.value = false;
  User.value = { id: '', userName: '', nickName: '', name: '', sex: '', phone: '', imageUrl: '' };
  imageUrl.value = '';
}
  // 修改
  const handleEdit = (row) => {
    saveOrUpdateTitle.value = '修改用户表'
    saveOrUpdateVisible.value = true
    User.value = row
    // console.log(url+ row.imageUrl)
    imageUrl.value = url + row.imageUrl
  }
  // 新增
  const toAdd = () => {
    saveOrUpdateTitle.value = '添加用户表'
    saveOrUpdateVisible.value = true

  }
  // 取消修改或保存
const close = () => {
  saveOrUpdateVisible.value = false;
  User.value = { id: '', userName: '', nickName: '', name: '', sex: '', phone: '', imageUrl: '' };
}
  // 定义一个页面加载函数
  onMounted(() => {
    // 获取用户列表
    getUserList();
  })
  const queryInfo = ref({
    pageNum: 1,
    pageSize: 5
  })
  // 查询用户列表
  const getUserList = () => {
    axios.get('/user/select', { params: queryInfo.value })
      .then(resp => {
        console.log(resp.data)
        let result = resp.data;
        total.value = result.data.total
        if (result.code == 1) {
          tableData.value = result.data.list
        } else {
          console.log('获取用户列表失败')
        }
      })
  }
  // 删除
const handleDelete = (id) => {
    ElMessageBox.confirm(
      '真的要删除吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        axios.delete('/user/deleteById', {
          params: { id: id }
        })
          .then(resp => {
            let result = resp.data;
            if (result.code == 1) {
              getUserList();
              ElMessage({
                message: '删除成功！',
                type: 'success',
              })
            } else {
              ElMessage({
                message: '删除失败！',
                type: 'warning',
              })
            }
          })
      })
}


</script>

  <style scoped>
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>